<template>
	<div class="Icon">
		<ul>
			<swiper :options="swiperOption">

			    <swiper-slide  v-for="(item,key) in pages" :key='key'>
			    	<li v-for="pp in item" :key='pp.id'>
						<img :src="pp.imgUrl"/>
						<p>{{pp.title}}</p>
					</li>
			    </swiper-slide>
			    
			    <div class="swiper-pagination"  slot="pagination"></div>
		 	</swiper>

		</ul>
	</div>
</template>

<script>
//	[
//	   [8]
//	   [2]
//	
//	]

export default {
	data(){
		return {
			swiperOption:{
				pagination: {
		          el: '.swiper-pagination'
		       }
			},
			IconList:[
			   {
			   	id:1,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:2,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:3,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:4,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:5,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			    {
			   	id:6,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:7,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:8,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:9,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   },
			   {
			   	id:10,
			   	imgUrl:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
			   	title:"景点门票"
			   }
			]
		}
	},
	computed:{
		pages () {
			var IconArr=[];   //创建新数组   
			/*IconArr=[
			 *  [   idx=0
			 *     id:0   ~id:7
			 *     8个元素
			 * ],
			 * 
			 * [   idx=1
			 *   id:8   ~id:9
			 *     2个元素
			 * 
			 * ]
			 * 
			 * 
			 * 
			 * 
			 * 
			 * ]*/
			
			
			this.IconList.forEach((item,index)=>{
				var idx=Math.floor(index/8);    //计算新数组下标     		
				if(!IconArr[idx]){ IconArr[idx]=[] };   //新数组没有元素时，赋空
				IconArr[idx].push(item);       //新数组存储
			})
			return IconArr;       //新数组返回
		}
	}
}

	
</script>

<style scoped>
	.Icon{
		width: 100%;
		height: 1.9rem;
		font-size: .14rem;
		display: flex;
		overflow: hidden;
	}
	.Icon ul{
		width: 100%;
	}
	.Icon ul li{
		float: left;
		width: 25%;
		text-align: center;
		height: .8rem;
		margin-top: .1rem;
	}
	.Icon ul li img{
		width: .55rem;
		height: .55rem;
		display: inline-block;
	}
	
	.swiper-pagination-bullet-active{
		background: #f00;
	}
	
</style>